<template>
  <div class="search-section" style="position: relative">
    <div class="bgFFF color000 bdradius4">
      <el-tabs v-model="tabsName" v-if="tabsList" @tab-click="Tabs">
        <el-tab-pane v-for="item in tabsList" :label="item.meta.title" :name="item.name"></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "secondMenu",
  data() {
    return {
      tabsList: [],
      tabsName: "",
    }
  },
  watch: {
    $route(val) {
      if (val.name === localStorage.getItem("menus")) {
        this.getRouter();
      }
    }
  },
  created() {
    this.getRouter();
  },
  methods: {
    getRouter() {
      let routers = JSON.parse(localStorage.getItem("routers"));
      let menus = localStorage.getItem("menus");
      let currentMenus = routers.find(item => item.name == menus);
      console.log('currentMenus', currentMenus);
      if (currentMenus.children.length) {
        currentMenus = currentMenus.children[0];
        // 根据后端返回的权限信息来循环几个tab按钮
        this.tabsList = currentMenus.children;
        this.tabsName = currentMenus.children[0].name;
      }

      //工作台跳转
      if (this.$route.query.tabsName) {
        this.tabsName = this.$route.query.tabsName;
      }

      this.$router.push({
        name: this.tabsName,
        query: {
          tabsName: this.tabsName,
        },
        params: this.$route.params
      })
    },
    Tabs(e) {
      console.log(e.label);
      this.$emit("titleValue", e.label);
      console.log(this.tabsList);
      let name = this.tabsList.find(item => item.name == this.tabsName);
      this.$router.push({
        name: this.tabsList.meta.title,
        query: {
          tabsName: this.tabsName,
        },
        params: this.$route.params
      })
    },
  }
}
</script>

<style scoped>

</style>
